/* @flow */

import React, { Component } from 'react';
import {
  View,
  Text,
  StyleSheet,
  ScrollView,
} from 'react-native';
import {
  Button,
  Avatar,
  Badge,
  ButtonGroup,
  CheckBox,
  Divider,
  FormLabel,
  FormInput,
  FormValidationMessage,
  Header,
  Icon,
  Rating,
  SearchBar,
} from 'react-native-elements'

import YaoView from '../CommonViews/YaoView';
import GuaView from '../CommonViews/GuaView'
import ZhouGuaView from '../CommonViews/ZhouGuaView'

export default class HomePage extends Component {

  static navigationOptions = (options) => {
    title: (navigation, childRouter) => {  // 动态标题
        if (navigation.state.params.isSelected) {
            return `${navigation.state.params.name}选中`;
        } else {
            return `${navigation.state.params.name}没选中`;
        }
    }
    header: () => {return nil}

  }
  constructor () {
    super()
    this.state = {
      selectedIndex: 2
    }
    this.updateIndex = this.updateIndex.bind(this)
  }

  updateIndex (selectedIndex) {
    this.setState({selectedIndex})
  }

  someMethod = () => {

  }

  render() {

    const buttons = ['Hello', 'World', 'Buttons']
    const { selectedIndex } = this.state

    return (
      <View
        onPress={this._pushNewPage}
        style={styles.container}>
      <ScrollView>

        <View style={[styles.columnCenter,{justifyContent: 'space-between',height: 100}]}>

          {/* <GuaView
            tagValue={1}
            style={{width: 100,height: 45,backgroundColor: 'clear'}}
            ></GuaView>

          <GuaView
            tagValue={3}
            style={{width: 100,height: 45,backgroundColor: 'clear'}}
            ></GuaView> */}
          <ZhouGuaView
            isValue
            tagValue={1}
            style={{width: 100,height: 100,backgroundColor: 'orange'}}
            ></ZhouGuaView>

        </View>

        <View ref='SearchBar' style = {styles.searchBarContainer}>
          <SearchBar
            onChangeText={this.someMethod}
            onClearText={this.someMethod}
            placeholder='Type Here...' />

          <SearchBar
            noIcon
            onChangeText={this.someMethod}
            onClearText={this.someMethod}
            placeholder='Type Here...' />

          <SearchBar
            round
            onChangeText={this.someMethod}
            onClearText={this.someMethod}
            placeholder='Type Here...' />

          <SearchBar
            lightTheme
            onChangeText={this.someMethod}
            onClearText={this.someMethod}
            placeholder='Type Here...' />

          <SearchBar
            lightTheme
            onChangeText={this.someMethod}
            onClearText={this.someMethod}
            icon={{ type: 'font-awesome', name: 'search' }}
            placeholder='Type Here...' />
        </View>

        <View style={styles.rateContainer}>
          <Rating
            showRating
            onFinishRating={this.ratingCompleted}
            style={{ paddingVertical: 10 }}
          />

          <Rating
            showRating
            type="star"
            fractions={1}
            startingValue={3.6}
            readonly
            imageSize={40}
            onFinishRating={this.ratingCompleted}
            style={{ paddingVertical: 10 }}
          />

          <Rating
            type="heart"
            ratingCount={3}
            fractions={2}
            startingValue={1.57}
            imageSize={40}
            onFinishRating={this.ratingCompleted}
            showRating
            style={{ paddingVertical: 10 }}
          />

        </View>
        <View ref='iconContainer' style={styles.iconContainer}>
          <Icon
            name='rowing'
            color='rgb(199, 53, 251)'
            size={50}/>
          <Icon
            name='g-translate'
            color='#00aced' />

          <Icon
            name='sc-telegram'
            type='evilicon'
            color='#517fa4'
          />

          <Icon
            reverse
            name='ios-american-football'
            type='ionicon'
            color='#517fa4'
          />

          <Icon
            raised
            name='heartbeat'
            type='font-awesome'
            color='#f50'
            onPress={() => console.log('hello')} />
        </View>

        <Header
            leftComponent={{ icon: 'menu', color: '#fff' }}
            centerComponent={{ text: '首页标题', style: { color: '#fff' } }}
            rightComponent={{ icon: 'home', color: '#fff' }}/>
        <Text style={styles.textStyle}>I'm the Homepage component</Text>
          <Badge
            value={3}
            textStyle={{ color: 'orange' }}/>
          <View
            ref='avatarContainer'
            style={styles.avatarContainer}
            >
            <Avatar
              small
              rounded
              title="MT"
              onPress={() => console.log("Works!")}
              activeOpacity={0.7}
            />
            <Avatar
              xlarge
              style={styles.avatarStyle}
              source={{uri: "https://s3.amazonaws.com/uifaces/faces/twitter/kfriedson/128.jpg"}}
              onPress={() => console.log("Works!")}
              activeOpacity={0.2}
              heigh={150}
              widt={150}
            />
            <Avatar
              large
              source={{uri: "https://s3.amazonaws.com/uifaces/faces/twitter/brynn/128.jpg"}}
              onPress={() => console.log("Works!")}
              activeOpacity={0.7}
              />
          </View>
         <View ref='badgeContainer' style={styles.badgeContainer}>
           <Badge
             value={3}
             textStyle={{ color: 'orange' }}/>
           <Badge containerStyle={{ backgroundColor: 'violet'}}>
             <Text>User 1</Text>
           </Badge>
           <Badge onPress={() => {console.log('pressed')}} value="5" />
         </View>
         <View ref='buttonContainer'>
           <Button
             title='BUTTON' />

           <Button
             raised
             icon={{name: 'cached'}}
             title='BUTTON WITH ICON' />
           <Button
             large
             iconRight={{name: 'code'}}
             title='LARGE WITH RIGHT ICON' />

           <Button
             large
             icon={{name: 'envira', type: 'font-awesome'}}
             title='LARGE WITH ICON TYPE' />

           <Button
             large
             color='rgb(255, 255, 255)'
             backgroundColor='rgb(136, 241, 71)'
             icon={{name: 'squirrel', type: 'octicon', buttonStyle: styles.someButtonStyle }}
             title='OCTICON' />
             <ButtonGroup
                   onPress={this.updateIndex}
                   selectedIndex={selectedIndex}
                   buttons={buttons}
                   containerStyle={{height: 30}}
                   buttonStyle={{backgroundColor: 'rgb(244, 127, 67)'}}
                   underlayColor='rgb(68, 244, 95)'
                   textStyle={{color: 'rgb(185, 27, 224)'}}
                 />

         </View>
         <CheckBox
          title='Click Here'
          checked={true}
        />
        <CheckBox
          center
          title='Click Here'
          checked={this.state.checked}
        />
        <CheckBox
          center
          title='Click Here'
          checkedIcon='dot-circle-o'
          uncheckedIcon='circle-o'
          checked={this.state.checked}
        />
        <CheckBox
          center
          title='Click Here to Remove This Item'
          iconRight
          iconType='material'
          checkedIcon='clear'
          uncheckedIcon='add'
          checkedColor='red'
          checked={this.state.checked}
        />
        <Divider style={{ backgroundColor: 'blue' }} />

        <FormLabel>Name</FormLabel>
        <FormInput />
        <FormValidationMessage>Error message</FormValidationMessage>

      </ScrollView>


      </View>
    );
  }

  _pushNewPage = () => {
    this.props.navigation.push('detail')
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'rgb(37, 241, 201)',
    flexDirection:'column',
    justifyContent: 'center'

  },
  rowCenter:{
    flexDirection: 'row',
    justifyContent: 'center',
  },
  columnCenter:{
    flexDirection: 'column',
    alignItems: 'center',
  },
  textStyle:{
    textAlign: 'center'
  },
  avatarStyle:{
    justifyContent: 'center',
    backgroundColor: 'rgb(195, 88, 242)',
  },
  avatarContainer:{
    flexDirection: 'row',
    justifyContent: 'center',
  },
  badgeContainer:{
    // backgroundColor: 'rgb(214, 255, 17)',
    flexDirection: 'row',
    alignItems: 'center',
    // justifyContent: 'flex-start'
  },
  iconContainer:{
    flexDirection: 'row',
    justifyContent: 'center'
  },
  rateContainer:{
    // justifyContent: 'center'
    alignItems: 'center',
  },
  searchBarContainer:{
    alignItems: 'center',
  }
});
